<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>dom查</title>
</head>

<body>
    <div id="box">
        <p id="p">我是一</p>
        <p>我是二</p>
        <p>我是三</p>
        <h2 id="h2">我是标题</h2>
    </div>
    

</body>
<!-- 通过节点属性   查询 -->
<script>
    var box = document.querySelector('#box')
    var h2 = document.querySelector('#h2')
    var p = document.querySelector('#p')
    console.log(box);

    // childNodes  孩子节点(直接后代)
    var sunWuKong = box.childNodes
    console.log(sunWuKong);
    // NodeList(9) [text, p, text, p, text, p, text, h2, text]    text 表示换行符<br>
    // NodeList  是一个伪数组 有length属性 没有数组方法,
    // 伪数组是指具有按数值索引和 length 属性的对象，但不具备数组原型上的各种方法的对象
    sunWuKong[1].style.fontSize = '50px';

    // children  孩子元素节点
    var tangSeng = box.children;
    console.log(tangSeng); // HTMLCollection(4) [p, p, p, h2]
    // HTMLCollection 也是 伪数组
    tangSeng[0].style.color = 'red';

    // parentNode  父节点
    var zhuBaJie = box.parentNode;
    console.log(zhuBaJie); //<body>...</body>
    zhuBaJie.style.background = '#a3c6da'

    // previouSibling  / previousElementSibling     上兄弟
    var shaSeng = h2.previousSibling
    console.log(shaSeng);  // #text  
    var juanLian = h2.previousElementSibling
    console.log(juanLian);  // <p style="background: rgb(163, 198, 218);">我是三</p>
    juanLian.style.color = '#f69cec'

    // nexSiling  /  nexElementSiling   下兄弟
    var xiaoBaiLong = p.nextSibling
    console.log(xiaoBaiLong);
    var baiLongMa = p.nextElementSibling
    console.log(baiLongMa);  // <p style="font-size: 25px;">我是二</p>
    baiLongMa.style.fontSize = '25px'
</script>

</html>